<template>
  <div class="mobile-preview-wrapper" style="justify-content: flex-end; background: #f7f8fa;">
    <!-- 主内容区占位 -->
    <div class="content-placeholder"></div>

    <!-- 底部导航预览 -->
    <div class="tabbar-preview">
      <!-- 确保 config 和 config.items 存在 -->
      <div v-for="(item, index) in (config ? config.items : [])" :key="index" class="tab-item">
        <!-- 预览时，通常高亮第一个作为示例 -->
        <el-image :src="index === 0 ? item.selectedIcon : item.unselectedIcon" class="tab-icon">
             <div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
        </el-image>
        <!-- 确保 config 和 config.style 存在 -->
        <span :style="{ color: index === 0 ? (config && config.style ? config.style.selectedColor : '') : (config && config.style ? config.style.defaultColor : '') }">
          {{ item.name }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: "TabBarPreview",
    props: {
        config: {
            type: Object,
            default: null
        }
    }
}
</script>

<style scoped>
.mobile-preview-wrapper {
  width: 375px;
  min-height: 667px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  border: 8px solid #333;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.content-placeholder {
    flex: 1;
}
.tabbar-preview {
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 10px;
}
.tab-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 18px;
}
</style>
